import React, { Component, PropTypes } from 'react'
import { exportFile, fetchPost } from '../../../utils/request'

import {
  Table,
  message,
  Button,
  Form,
  Input,
  Modal,
  Select,
  Card
} from 'antd'
import moment from 'moment'
import Styles from './Index.less'

/**
 * 逾期分单列表
 */
class List extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      params: props.params,
      list: [],
      loading: false,
      page: {
        currentPage: 1,
        pageSize: 30,
        totalCount: null
      },
    }
  }

  componentDidMount () {
    this.getData()
  }

  componentWillReceiveProps (props) {
    if (props.params != this.state.params) {
      this.setState({
        params: props.params
      }, () => {
        this.getData()
      })
    }
  }

  getData () {
    this.setState({
      loading: true
    })

    let copyParams = {}
    for (let i in this.state.params) {
      let value = this.state.params[i]
      if (!value) {
        copyParams[i] = null
      } else {
        copyParams[i] = value
      }
    }
    fetchPost(`/collection/v2/paid/list?currentPage=${this.state.page.currentPage}&pageSize=${this.state.page.pageSize}`, copyParams).then(res => {
      if (res.code === 0) {
        if (res.data && res.data.paidList) {
          this.setState({
            list: res.data.paidList,
            page: res.page,
          })
        } else {
          this.setState({
            list: [],
            page: {
              currentPage: 1,
              pageSize: 30,
            }
          })
        }
      } else {
        message.error(res.msg)
      }
      this.setState({
        loading: false
      })
    })
  }

  nextpage (current) {
    this.setState({
      page: {
        ...this.state.page,
        currentPage: current
      }
    }, () => {
      this.getData()
    })
  }

  render () {
    let self = this
    const columns = [
      {
        title: 'Merchant',
        dataIndex: 'merchantCode',
        key: 'merchantCode'
      }, {
        title: 'App Name',
        dataIndex: 'appName',
        key: 'appName'
      }, {
        title: 'Loan ID',
        dataIndex: 'tradeNo',
        key: 'tradeNo'
      }, {
        title: 'Repayment Date',
        dataIndex: 'repaymentDate',
        key: 'repaymentDate'
      }, {
        title: 'Notification Time',
        key: 'notificationTime',
        dataIndex: 'notificationTime'
      }, {
        title: 'Settlement Time',
        key: 'settlementTime',
        dataIndex: 'settlementTime'
      }, {
        title: 'Repay BizNo',
        key: 'repayBizNo',
        dataIndex: 'repayBizNo'
      }, {
        title: 'Result',
        key: 'result',
        dataIndex: 'result'
      }, {
        title: 'Overdue days',
        key: 'overdueDays',
        dataIndex: 'overdueDays'
      }, {
        title: 'Agent',
        key: 'agent',
        dataIndex: 'agent'
      }, {
        title: 'Bucket',
        key: 'bucket',
        dataIndex: 'bucket'
      }, {
        title: 'Loan Amount',
        key: 'borrowCapital',
        dataIndex: 'borrowCapital'
      }, {
        title: 'Interest',
        key: 'interest',
        dataIndex: 'interest'
      }, {
        title: 'Penalty',
        key: 'penalty',
        dataIndex: 'penalty'
      }, {
        title: 'Actual Amount Paid',
        key: 'paidAmount',
        dataIndex: 'paidAmount'
      }, {
        title: 'Discount Amount',
        key: 'deductAmount',
        dataIndex: 'deductAmount'
      }
    ]

    const pagination = {
      total: self.state.page.totalCount,
      pageSize: self.state.page.pageSize,
      showSizeChanger: false,
      showQuickJumper: true,
      showTotal (total) {
        return `Total ${total} `
      },
      onChange (current) {
        self.nextpage(current)
      }
    }

    return (
      <div>
        <Table
          key='collectionNo'
          pagination={pagination}
          columns={columns}
          dataSource={self.state.list}
          loading={self.state.loading}
          bordered
          size='small'
        />
      </div>
    )
  }
}

export default List
